<template>
  <div class="dataCleaning">
    <el-row :gutter="20" style="height: 100%;">
      <el-col :span="12">
        <div class="grid-content-wrapper">
          <div class="grid-content">
            <h4 class="header_1 header-border">配置</h4>
            <div class="fileSelection">
              <div class="title">数据来源</div>
              <el-select v-model="dataSelected" style="width: 100%;">
                <el-option v-for="item in selectedData" :key="item" :label="item" :value="item">{{item}}</el-option>
              </el-select>
            </div>
            <div class="cleaningWay">
              <div class="title">选择文件</div>
              <div class="select-switch-box">
                <el-input
                  v-model="fileName"
                  style="max-width: 100%;"
                  class="input-with-select"
                >
                  <template #append>
                    <el-upload
                      ref='fileRef'
                      class="upload-demo"
                      action="#"
                      :limit="1"
                      :auto-upload="false"
                      :show-file-list='false'
                      :on-change="handleChange"
                      :on-exceed="handleExceed"
                    >
                      <template #trigger>
                        <el-button type="primary">...</el-button>
                      </template>
                    </el-upload>
                  </template>
                </el-input>
                <!-- <el-switch v-model="switchValueUp" style="margin-left: 20px;" @change="switchChangeUp" /> -->
              </div>
            </div>
            <div class="cleaningWay">
              <div class="title">清洗方式</div>
              <div class="select-switch-box">
                <el-select v-model="selectValue.selectA" :disabled="!switchValueArr[0].value">
                  <el-option
                    v-for="item in cleaningWay_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-switch v-model="switchValueArr[0].value" style="margin-left: 20px;" @change="switchChangeA" />
              </div>
            </div>
            <div class="cleaningWay">
              <div class="title">降维方法</div>
              <div class="select-switch-box">
                <el-select v-model="selectValue.selectB" :disabled="!switchValueArr[1].value">
                  <el-option
                    v-for="item in dimenredu_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-switch v-model="switchValueArr[1].value" style="margin-left: 20px;" @change="switchChangeB" />
              </div>
            </div>
            <div class="cleaningWay">
              <div class="title">融合方法</div>
              <div class="select-switch-box">
                <el-select v-model="selectValue.selectC" :disabled="!switchValueArr[2].value">
                  <el-option
                    v-for="item in fuseWay_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-switch v-model="switchValueArr[2].value" style="margin-left: 20px;" @change="switchChangeC" />
              </div>
            </div>
            <div class="cleaningWay">
              <div class="title">估计方法</div>
              <div class="select-switch-box">
                <el-select v-model="selectValue.selectD" :disabled="!switchValueArr[3].value">
                  <el-option
                    v-for="item in estimateWay_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-switch v-model="switchValueArr[3].value" style="margin-left: 20px;" @change="switchChangeD" />
              </div>
            </div>
          </div>
          <div class="btns">
            <el-button @click="startClick" type="primary" style="padding: 10px 40px;">开始处理</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content-wrapper">
          <div class="grid-content ep-bg-purple">
            <h4 class="header_1">处理状态</h4>
            <div class="over_btn">
              <el-tag :type="tagType" style="width: 90%; padding: 15px 0; font-size: 18px">
                {{ c_status }}
              </el-tag>
            </div>
            <div class="component-main">
              <keep-alive>
                <component
                  ref="handleChildRef"
                  :is="component"
                  :fileData="base64File"
                  :fileName="fileName"
                  :selectValue="selectValue"
                  :switchValue="switchValueArr"
                  @childTitleStatusClick="chartTitleStatus">
                </component>
              </keep-alive>
            </div>
          </div>
          <div class="btns">
            <el-button @click="goBack" type="primary" style="padding: 10px 40px;" :disabled="clickNum === 0" v-show="labelArr.length > 1">上一个</el-button>
            <el-button @click="goOnClick" type="primary" style="padding: 10px 40px;" :disabled="clickNum === labelArr.length - 1" v-show="labelArr.length > 1">{{ goOnBtnText }}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted,computed,shallowRef,nextTick } from "vue";
import { codeList } from '@/api/dataProcessing'
import { message } from "@/utils/message";
import { genFileId } from 'element-plus'
import {
  chartA,
  chartB,
  chartC,
  chartD,
  // lf,
} from "./dataChart";

const goOnBtnText = ref('继续');
const selectedData = ref([]);
const handleChildRef = ref(null);
const dataSelected = ref(null);
let c_status = ref("未清洗");
let switchValueArr = ref([{
    value: false,
    label: 'chartA'
  },
  {
    value: false,
    label: 'chartB'
  },
  {
    value: false,
    label: 'chartC'
  },
  {
    value: false,
    label: 'chartD'
  }])
  const selectValue = ref({
    selectA: 1,
    selectB: 'LLE',
    selectC: 0,
    selectD: 0,
  })
  const cleaningWay_options = [
    {
      value: 1,
      label: "缺失值填充"
    },
    {
      value: 0,
      label: "重复值删除"
    },
  ];
const dimenredu_options = [
  {
    value: 'PCA',
    label: "主成成分分析(PCA)"
  },
  {
    value: 'LLE',
    label: "局部线性嵌入式降维(LLE)"
  },
];
const fuseWay_options = [
  {
    value: 0,
    label: "卡尔曼滤波"
  },
  {
    value: 1,
    label: '频谱分析'
  }
];
const estimateWay_options = [
  {
    value: 0,
    label: "卷积神经网络(CNN)"
  },
  {
    value: 1,
    label: '残差神经网络(Res_net)'
  }
];
  const component = shallowRef();
  const componentList = shallowRef([
    {
      key: "chartA",
      name: "数据清洗",
      show: true,
      component: chartA
    },
    {
      key: "chartB",
      name: "数据降维",
      show: true,
      component: chartB
    },
    {
      key: "chartC",
      name: "数据融合",
      show: true,
      component: chartC
    },
    {
      key: "chartD",
      name: "数据估计",
      show: true,
      component: chartD
    },
    // {
    //   key: "lf",
    //   name: "本体实例",
    //   show: true,
    //   component: lf
    // },
  ]);
  const statusCode = ref(null);
  const chartTitleStatus = (item) => {
    c_status.value = item.title;
    statusCode.value = item.status;
  }
  onMounted(() => {
    getSelectedList();
  });

  let labelArr = ref([])
  // 开始处理
  const startClick = () => {
    if (!switchValueArr.value[0].value && !switchValueArr.value[1].value && !switchValueArr.value[2].value && !switchValueArr.value[3].value) {
      message('未选中算法', { type: "error" });
      return;
    }
    if (!fileName.value) {
      message('请选择文件', { type: "error" });
      return;
    }
    if (!dataSelected.value) {
      message('请选择数据来源', { type: "error" });
      return;
    }
    clickNum.value = 0;
    tagType.value = 'primary';
    labelArr.value = switchValueArr.value.filter((item) => {
      return item.value === true;
    })
    componentList.value.filter((item) => {
      if (item.key == labelArr.value[0].label) {
        component.value = item.component;
      }
    });
    nextTick(() => {
      handleChildRef.value.childMethod();
    })
    if (labelArr.value.length > 1) {
      goOnBtnText.value = '继续';
    } else {
      goOnBtnText.value = '完成';
    }
  }
  // 继续
  let clickNum = ref(0)
  const goOnClick = () => {
    if (!switchValueArr.value[0].value && !switchValueArr.value[1].value && !switchValueArr.value[2].value && !switchValueArr.value[3].value) {
      message('未选中算法', { type: "error" });
      return;
    }
    if (!fileName.value) {
      message('请选择文件', { type: "error" });
      return;
    }
    labelArr.value = switchValueArr.value.filter((item) => {
      return item.value === true;
    })
    if (clickNum.value < labelArr.value.length - 1) {
      clickNum.value++
      componentList.value.filter((item) => {
        if (item.key == labelArr.value[clickNum.value].label) {
          // currentMenu.value = key;
          component.value = item.component;
        }
      });
      nextTick(() => {
        handleChildRef.value.childMethod();
      })
    }
    if (c_status.value === '主轴转速异常') {
      tagType.value = 'danger';
    }
    if (clickNum.value === labelArr.value.length - 1) {
      goOnBtnText.value = '完成';
    }
  }

  // 上一个
  const goBack = () => {
    if (clickNum.value > 0) {
      goOnBtnText.value = '继续';
      clickNum.value--
      componentList.value.filter((item) => {
        if (item.key == labelArr.value[clickNum.value].label) {
          // currentMenu.value = key;
          component.value = item.component;
        }
      });
      nextTick(() => {
        handleChildRef.value.childMethod();
      })
    }
  }
  // 获取数据来源
  const getSelectedList = () => {
    codeList().then(res => {
      if (res.status === 200) {
        selectedData.value = res.data;
      }
    }).catch(error => {
      console.log(error);
    })
  }

  const switchChangeA = (value) => {
    switchValueArr.value[0].value = value;
  }
  const switchChangeB = (value) => {
    if (switchValueArr.value[2].value) {
      message('已选择融合', { type: "error" });
      switchValueArr.value[1].value = false;
      return;
    }
    switchValueArr.value[1].value = value;
  }
  const switchChangeC = (value) => {
    if (switchValueArr.value[1].value) {
      message('已选择降维', { type: 'error' });
      switchValueArr.value[2].value = false;
      return;
    }
    switchValueArr.value[2].value = value;
  }
  const switchChangeD = (value) => {
    switchValueArr.value[3].value = value;
  }
  // const switchChangeUp = (value) => {
  //   switchValueUp.value = value;
  // }

  let fileRef = ref()
  let fileName = ref();
  const base64File = ref('');
  // 选择文件时被调用，将他赋值给fileRef
  const handleChange = (file) => {
    fileRef.value = file.raw;
    fileName.value = file.name;
    const reader = new FileReader();
    reader.onload = (e) => {
      base64File.value = e.target.result;
    };
    reader.readAsDataURL(fileRef.value);
  }

  // 覆盖前一个选择的
  const handleExceed = (files) => {
    fileRef.value.clearFiles()
    const file = files[0];
    file.uid = genFileId()
    fileRef.value.handleStart(file)
  }

//计算属性
const tagType = computed(() => {
  // if (c_status.value ==='未清洗') {
  //     return 'danger'
  // }
  // else if (c_status.value ==='清洗完成') {
  //   return 'success'
  //   }
})
</script>

<style lang="scss" scoped>
.dataCleaning {
  width: 100%;
  height: 100%;
  font-size: 16px;

  .grid-content-wrapper {
    height: 100%;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    margin-bottom: 0px;
    padding: 0 10px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .grid-content {
    flex: 1;
  }

  .header_1,
  .header_2 {
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
  }

  .header-border {
    border-bottom: 1px solid #ccc;
  }

  .title{
    font-size: 15px;
  }
  .fileSelection,
  .cleaningWay,
  .storePath {
    width: 100%;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 10px;
  }

  .select-switch-box {
    display: flex;
  }

  .btns {
    width: 100%;
    text-align: right;
    padding: 0 20px 20px 0;
  }

  .over_btn {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
  }

  .chart {
    width: 100%;
    height: 430px;
    margin-top: 20px;
  }
}
</style>
